<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>字幕效果</title>
  <script src="../static/js/vue.global.js"></script>
  <style>
    .lyric{
        background: #fff -webkit-linear-gradient(left, #037DF3, #037DF3) no-repeat 0 0;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        background-size: 0 100%;
    }
    .talk-liters{
        width: 100%;
        height: 100%;
        background: rgb(187, 184, 184);
        overflow-y: hidden;
        overflow-x: scroll;
    }
    .talk-liters::-webkit-scrollbar {
        display: none;
    }
</style>
</head>
<body>
<div id="app">
    <button @click="start">启动效果</button>
    <div class="talk-liters" ref="superLiters">
        <div class="liters-con" ref="liters">
            <div :style="{'font-size': fontSize+'px'}">
                <font ref="playedFont" class="lyric" :style="style">{{text}}</font>
            </div>
        </div>
    </div>
</div>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        text: '你好，陈先生，这是我们的字幕效果，您可以尝试启动服务看效果。',
        fontSize: 24,
        style: {
            width: '0%'
        }
      }
    },
    methods: {
        start() {
            this.style = {
                width: '0%',
                backgroundSize: '100% 100%',
                transition: 'background-size 10s linear'
            }
        }
    }
  }).mount('#app')
</script>
</body>
</html>
